<template>
<div class="container mt-5">
  <div v-for="article in articles" :key="article.id">
    <h3>
      <router-link
        :to="{name:'details', params:{id:article.id}}"
      >
        {{article.title}}

      </router-link>

    </h3>

  </div>
</div>
</template>

<script>
export default {
  data(){
    return {
      articles:[],
    }
  },

  methods:{
    getArticles(){
      fetch('http://localhost:5000/get', {
        method:"GET",
        headers:{
          "Content-Type":"application/json"
        }
      })
      .then(resp => resp.json())
      .then(data => {
        // vue中使用数据添加数组页面渲染方式.push(...newList)
        // 添加“...” 可以将内部数组对象逐个以对象形式推送
        this.articles.push(...data);
      })
      .catch(error =>{
        console.log(error);
      })
    }
  },

  created() {
    this.getArticles()
  }


}
</script>

<style>

</style>
